<template>
  <div class="withdrawal" v-if="isShow">
    <div class="withdrawalTitle displayFlex">
      <section>
        尊敬的 {{drlTitleData.name}}，你好! 你的账户余额为<span>{{drlTitleData.amount}}</span>元
      </section>
      <section>
        <router-link :to="{name:'accountDetails',query:{perIndex:'3',actionType:'2'}}"><p>提现记录</p></router-link>
      </section>
    </div>
    <div class="withdrawalList">
      <ul>
        <li>
          <article class="withdrawalArticle displayFlex">
            <section>银行卡号</section>
            <section class="cardSection">
              <img src="../../../assets/images/theColor/icon/zhangshu.png" alt="" class="cardImg"><span class="cardTxt">储存卡</span><span
                class="cardLine">|</span><span class="cardNum">尾号**{{lastDigitsNumber}}</span>
            </section>
          </article>
        </li>
        <li>
          <article class="withdrawalArticle displayFlex">
            <section>提款金额</section>
            <section>
              <input type="text" v-model="withdrawalsValue" placeholder="请输入提现金额" class="inputWith">
              <span class="poundage">提款0手续费</span>
            </section>
          </article>
        </li>
        <li>
          <article class="withdrawalArticle displayFlex">
            <section>提现密码</section>
            <section>
              <Input v-model="withPassValue" type="password" placeholder="请输入提现密码" style="width: 300px"></Input>
            </section>
          </article>
        </li>
      </ul>
      <div class="withdrawalSubmit">
        <p><a href="javascript:void(0)" @click="withdrawalOnThe">下一步</a></p>
        <span>每天最多提款{{withdrawCount}}次</span>
      </div>
    </div>
    <div class="withdrawalPrompt displayFlex">
      <section>提款须知</section>
      <section>
        <p>为了防止极个别用户进行信用卡套现、洗钱、网络钓鱼等违法行为，本站针对异常提款进行严格审核，正常现金提款不受影响。</p>
      </section>
    </div>
  </div>
</template>
<script>
  import './withdrawal.scss';
  import {mapState} from 'vuex';
  export default {
    data() {
      return {
        drlTitleData: {
          name: 'wd',
          amount: 0
        },
        withdrawalsValue: '',
        withPassValue: '',
        lastDigitsNumber: '',
        withdrawCount: 0,
        widChains: false,
        maximumWith: 0, //最大提现
        minimumWith: 0, //最小提现
        isShow: false,
      }
    },
    computed: {
      ...mapState({
        userInformation: state => state.mutations.userInformation,
      })
    },
    activated() {
      this.userNameEvent();
    },
    deactivated(){
      $('.messageMask').fadeOut('fast');
    },
    methods: {
      initData() {
        let that = this;
        that._Util.post(that, that._Api.POST_GET_BANK_CARD_DATA, {}, (data) => {
          let thisData = data;
          that.isShow = true;
          that.lastDigitsNumber = thisData.cardNumber;
          that.withdrawCount = thisData.withdrawCount;
          that.maximumWith = parseFloat(thisData.withdrawUpper);
          that.minimumWith = parseFloat(thisData.withdrawLower);
        });

      },
      userNameEvent() {
        let that = this;
        if (that.userInformation) {
          that.drlTitleData.name = that.userInformation.memberInfo.username || '';
          that.drlTitleData.amount = that.userInformation.memberInfo.amount || '0';
          if (that.$route.name == 'withdrawal') {
            that.isShow = true;
            if (that.userInformation.memberInfo.isBindBankCard == '0') {
              that._Util.showMessage(that, {content: ['未绑定银行卡，无法完成提现。']}, ()=> {
                that.$router.push({name: "userInfo", query: {id: 1, type: 3}});
              }, '', 1, '绑定银行卡');
              return;
            }
            if (that.userInformation.memberInfo.isSetPay == '0') {
              that._Util.showMessage(that, {content: ['未设置交易密码，无法完成提现。']}, ()=> {
                that.$router.push({name: "userInfo", query: {id: 1, type: 1}});
              }, '', 1, '设置交易密码');
              return;
            }
            that.clearData();
            that.initData();
          }
        }
      },
      //清除数据
      clearData() {
        this.withdrawalsValue = '';
        this.withPassValue = '';
      },
      withdrawalOnThe() {
        let that = this;
        if (!that.withdrawalsValue || that.withdrawalsValue < that.minimumWith || that.withdrawalsValue > that.maximumWith) {
          that._Util.showAlert('提款金额必须在' + that.minimumWith + '与 ' + that.maximumWith + '');
          return;
        }
        if (parseFloat(that.withdrawalsValue) > parseFloat(that.drlTitleData.amount)) {
          that._Util.showAlert('余额不足');
          return;
        }
        if (!that.withPassValue) {
          that._Util.showAlert('提密码输入不能为空');
          return;
        }
        let walSubmit = {
          amount: that.withdrawalsValue,
          payPassword: that._Util.hexMd5(that.withPassValue)
        };
        if (that.widChains) return;
        that.widChains = true;
        that._Util.post(that, that._Api.POST_USERNAME_WITHDRAW_DATA, walSubmit, (data) => {
          that.widChains = false;
          that.$parent.$refs.personalHeader.theUserInForm();
          that._Util.showAlert('提现信息已经成功提交');
          that.userInformation.memberInfo.amount = that.drlTitleData.amount-that.withdrawalsValue;
          that.drlTitleData.amount = that.userInformation.memberInfo.amount;
          that.withdrawalsValue = '';
          that.withPassValue = '';
        }, (data) => {
          that.widChains = false;
        },'post');
      }
    },
    watch: {
      'withdrawalsValue'() {
        this.withdrawalsValue = this.withdrawalsValue.replace(/[^\d]/g, '');
      },
      'userInformation'() {
        this.userNameEvent();
      },
      '$route.query.id'(val) {
        if (val == 7) {
          this.userNameEvent();
        }
      }
    }
  }
</script>
